<template>
    <div style="padding: 15px">
      <div style="margin-bottom: 15px;">
        <Input style="width: 200px;" placeholder="请输借阅编号"/>
        <Input style="width: 200px;" placeholder="请输读者编号"/>
        <Input style="width: 200px;" placeholder="请输读者姓名"/>
        <Button type="success">搜索</Button>
        <Button @click="add" type="primary" style="float: right;">手动借阅</Button>
      </div>
      <Table border :columns="columns7" :data="data6"></Table>
      <Page :total="100" show-elevator />
      <Modal v-model="identity" title="手动借阅" :width="1100" ok-text="确定借出" :mask-closable="false">
        <Form :model="addForm" :label-width="80">
          <Row>
            <Col span="8">
              <FormItem label="读者编号">
                <Input v-model="addForm.addName" placeholder="请输入身份名称" />
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="读者手机号">
                <Input v-model="addForm.addName" placeholder="请输入身份名称" />
              </FormItem>
            </Col>
            <Col span="8">
              <Button type="primary" style="float: right;">检索</Button>
            </Col>
          </Row>
          <Row>
            <Col span="8">
              <FormItem label="书名">
                <Input v-model="addForm.addName" placeholder="请输入身份名称" />
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="ISBN">
                <Input v-model="addForm.addName" placeholder="请输入身份名称" />
              </FormItem>
            </Col>
            <Col span="8">
              <Button type="primary" style="float: right;">检索</Button>
            </Col>
          </Row>
          <Row>
            <Col span="6">
              读者编号：3333333
            </Col>
            <Col span="6">
              读者姓名：啦啦啦啦
            </Col>
            <Col span="6">
              读者手机号：1231234123
            </Col>
            <Col span="6">
              书籍：宇宙超度指南
            </Col>
          </Row>
          <Row>
            <Col span="6">
              ISBN：222222222222
            </Col>
            <Col span="6">
              定价：3333
            </Col>
          </Row>
        </Form>
      </Modal>
    </div>
</template>
<script>
   export default {
     name: 'loan-management',
     data () {
       return {
         identity: false,
         addForm: {},
         columns7: [
           {
             title: '借阅编号',
             align: 'center',
             tooltip: true,
             key: 'name'
           },
           {
             title: '读者编号',
             align: 'center',
             tooltip: true,
             key: 'age'
           },
           {
             title: '读者姓名',
             align: 'center',
             tooltip: true,
             key: 'address'
           },
           {
             title: '借阅书籍',
             align: 'center',
             tooltip: true,
             key: 'address'
           },
           {
             title: 'ISBN',
             align: 'center',
             tooltip: true,
             key: 'address'
           },
           {
             title: '借出时间',
             align: 'center',
             tooltip: true,
             key: 'address'
           },
           {
             title: '应还时间',
             align: 'center',
             tooltip: true,
             key: 'address'
           },
           {
             title: '书籍所属书屋',
             align: 'center',
             tooltip: true,
             key: 'address'
           },
           {
             title: '书籍借出书屋',
             align: 'center',
             tooltip: true,
             key: 'address'
           },
           {
             title: '操作',
             key: 'action',
             width: 200,
             align: 'center',
             render: (h, params) => {
               return h('div', [
                 h('Button', {
                   props: {
                     type: 'primary',
                     size: 'small'
                   },
                   style: {
                     marginRight: '5px'
                   },
                   on: {
                     click: () => {
                       this.show(params.index)
                     }
                   }
                 }, '同意借阅'),
                 h('Button', {
                   props: {
                     type: 'error',
                     size: 'small'
                   },
                   on: {
                     click: () => {
                       this.remove(params.index)
                     }
                   }
                 }, '取消借阅')
               ])
             }
           }
         ],
         data6: [
           {
             name: 'John Brown',
             age: 18,
             address: 'New York No. 1 Lake Park'
           },
           {
             name: 'Jim Green',
             age: 24,
             address: 'London No. 1 Lake Park'
           },
           {
             name: 'Joe Black',
             age: 30,
             address: 'Sydney No. 1 Lake Park'
           },
           {
             name: 'Jon Snow',
             age: 26,
             address: 'Ottawa No. 2 Lake Park'
           }
         ]
       }
     },
     methods: {
       add() {
         this.identity = true
       }
     }
   }
</script>

<style scoped>

</style>
